<template>
	<view class="page">
		<comHead :datas="datasObj">
			<template #headerContent>
				<view style="width: 100%;height: 110px;">
					<view class="edit_box flex-bwt mt-30">
						<view class="item ft-28">推荐({{ total }})</view>

						<view class="edit ft-24 c-33 bd-r20" v-if="!isEdit" @click="changeEdit()">
							管理
							<image class="icons"
								:src="`https://cdn.oss.bon-top.cn/static_bc/images/edit_icon_black.png`"
								mode="aspectFill">
							</image>
						</view>
						<view class="edit editactive ft-24 c-33 bd-r20" v-else @click="changeEdit()">
							完成

						</view>
					</view>
					<!--tab栏  -->
					<view class="tabBar flex mt-20">
						<view class="item ft c-66 flex-center" :class="{ active: selectId === item.id }"
							v-for="(item, index) in tableList" :key="index" @click="selectBtn(item)">{{ item.name }}
						</view>
					</view>
				</view>
			</template>
		</comHead>



		<view class="nextCard">
			<!-- 列表 -->
			<comLoadMord v-if="Object.keys(dataListObj).length > 0" :dataList='dataListObj' :pageInfo='pageInfo'
				ref="LoadMordView" @getDatas="getProductListFun">
				<template v-if="dataList.length > 0">
					<view class="cardList_box flex" v-for="item in dataList" :key="item.id">
						<view class="cardList_box_item" :style="{ transform: `translateX(${item.offsetX}px)` }"
							@touchstart="handleTouchStart($event, item)" @touchmove="handleTouchMove"
							@touchend="handleTouchEnd">
							<view class="cardList auto flex fs0">
								<view class="checkBox mr-8 ml-10" v-if="isEdit">
									<view class="yuan" @click="changCheckd(item)">
										<image class="icons" v-if="item.click"
											:src="`https://cdn.oss.bon-top.cn/static_bc/images/check.png`"
											mode="aspectFill">
										</image>
										<view class="bd-r50c noCheckd" v-else></view>
									</view>
								</view>
								<view class="card auto pd-12"
									@click="goPage('/subpackage/immigration/immigration?id=' + item.id)">

									<view class="flex">
										<view class="left" style="flex-shrink: 0;">
											<image class="wh-100 bd-r40" :src="item.cover" mode="aspectFill">
											</image>
										</view>
										<view class="right ml-20 te-wid">
											<view class="top1 flex mt-30 te-wid">
												<view class="flex fs0 mr-4" v-if="item.recommends_show.length > 0">
													<view class="tip ft ft-20 flex-center mr-10"
														v-for="(tag, index) in item.recommends_show" :key="index">
														{{ tag }}
													</view>
												</view>
												<view class="title  ft-lue ft ft-32 fw-800">
													{{ item.name }}</view>
											</view>
											<view class="midel flex mt-10">
												<text class="ft mr-10 c-99" v-for="(tag, index) in item.tags"
													:key="index">
													<text v-if="index === item.tags.length - 1">{{ tag.name
													}}</text>
													<text v-else> {{ tag.name + " | " }}</text>
												</text>
											</view>
											<view class="domn flex mt-20">
												<view class="price pd-10">
													<view class="ft">白菜价</view>
													<text style="
															font-weight: 800;
															font-size: 20rpx;
															color: #333333;
															margin-top: 8rpx;
															">
														{{ item.currency_symbol }}
														<text style="
																font-family: 'DIN COROS';
																font-weight: 400;
																font-size: 28rpx;
																color: #333333;
																">
															{{ item.bc_price_show }}</text>
														{{ item.bc_price_unit }}</text>
												</view>
												<image class="wh-37" style="margin: 0 20rpx;"
													src="https://cdn.oss.bon-top.cn/static_bc/images/price1.png">
												</image>
												<view class="price2">
													<view class="ft">同行价</view>
													<text v-if="item.peer_price_show > 0"
														style="font-weight: 800; font-size: 20rpx; color: #999999">
														{{ item.currency_symbol }}
														<text style="
												  font-family: 'DIN COROS';
												  font-weight: 400;
												  font-size: 28rpx;
												  color: #999999;
												">
															{{ item.peer_price_show }}</text>
														{{ item.peer_price_unit }}</text>
													<text v-else
														style="font-weight: 800; font-size: 20rpx; color: #999999">
														{{ "暂无价格" }}
													</text>
												</view>
											</view>
										</view>
									</view>
									<view class="foot mt-20 flex-bwt">
										<view class="arrow ml-12">
											<text class="ft c-99" v-if="item.brand_info">{{ "项目方: " +
												item.brand_info.name
											}}</text>
											<text class="ft" v-else>{{ "项目方:暂无数据" }}</text>
										</view>
										<view class="down flex mr-12">
											<image class="wh-24"
												src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png">
											</image>
											<text class="ft" style="margin-left: 8rpx" v-if="item.country_info">
												{{ item.country_info.name }}</text>
											<text class="ft" style="margin-left: 8rpx" v-else> {{ '暂无数据' }}</text>
										</view>
									</view>
								</view>

							</view>



						</view>
						<view class="delete-btn bd-r20 ft-24 flex-center"
							:style="{ transform: `translateX(${item.offsetX}px)` }" @tap="deleteItem(item.id)"
							v-if="!isEdit">取消推荐
						</view>
					</view>
				</template>



			</comLoadMord>

			<view style="height: 100px;"></view>

		</view>
		<view style="height: 88rpx;"></view>

	</view>
	<view class="bot_flex">
		<view class="flex-bwt" v-if="isEdit">
			<view class="checkBox mr-8">
				<view class="yuan flex " @click="changCheckdAll()">
					<image class="icons mr-4" v-if="checkdAll"
						:src="`https://cdn.oss.bon-top.cn/static_bc/images/check.png`" mode="aspectFill"></image>
					<view class="bd-r50c noCheckd mr-4" v-else></view>
					全选
				</view>
			</view>
			<view class="btn bd-r20" @click="deledtItemAll()">取消推荐{{ checkIds.length }}）</view>
		</view>
		<view v-else class="btn btn_toPage bd-r20" @click="addProject()">选择项目</view>

	</view>
	<u-modal :show="showModal" title="取消推荐" cancelText="取消" content='确定要取消推荐项目吗？' contentTextAlign="center"
		showCancelButton @confirm="confirm" @cancel="cancel"></u-modal>
</template>

<script setup lang="js">
import comHead from '@/components/comHead.vue';
import { onHide, onLoad, onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onUnmounted } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
let datasObj = reactive({
	title: '推荐项目',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	// height: 800
})
let pageInfo = reactive({
	page: 1,
	pageSize: 10
})
const tableList = ref([
	{ id: 1, name: '全部' },
	{ id: 2, name: '移民' },
	{ id: 3, name: '教育' },
])
let app = getApp()

const addProject = () => {
	if (!app.globalData.isTeacherAdd) app.globalData.isTeacherAdd = true
	if (!app.globalData.multiple) app.globalData.multiple = true
	if (!app.globalData.projectIds?.length) app.globalData.projectIds = []
	if (!app.globalData.projectItem?.length) app.globalData.projectItem = []

	uni.navigateTo({
		url: '/subpackage/search/search',
	})
}
const selectId = ref(1)
const selectName = ref('')
const selectBtn = async (item) => {
	selectId.value = item.id
	selectName.value = item.id == 1 ? '' : item.name
	dataList.value = []
	checkdAll.value = false
	isEdit.value = false
	getProductListFun()
}
const ids = ref([])
const showModal = ref(false)
const confirm = () => {
	cancelSaleRecommend()
	cancel()

}
// 取消
const cancel = () => {
	isEdit.value = false
	checkdAll.value = false
	showModal.value = false
	// 清空checkBox选择
	dataList.value.forEach(f => {
		f.click = false
		f.offsetX = 0
	})

}

// 取消推荐(单选)
const deleteItem = (id) => {
	showModal.value = true
	ids.value = [id]
}
const deledtItemAll = () => {
	showModal.value = true
	ids.value = checkIds.value
	// cancel()
}
// 取消推荐方法
const cancelSaleRecommend = () => {
	utils.request(api.cancelSaleRecommend
		, { ids: ids.value },
		'post').then((res) => {
			dataList.value = []

			getProductListFun()
		})
}
const movableWidth = ref('calc(100% + 160rpx)')
const contentxxWidth = ref('calc(100% - 160rpx)')
const changeEdit = () => {
	isEdit.value = !isEdit.value
	if (isEdit.value) {
		contentxxWidth.value = '100%'
		movableWidth.value = '100%'
	} else {
		movableWidth.value = 'calc(100% + 160rpx)'
		contentxxWidth.value = 'calc(100% - 160rpx)'
		cancel()

	}
	changeCheckIds()
}
// const cancel = () => {
// 	isEdit.value = false
// 	checkdAll.value = false
// 	dataList.value.forEach(f => {
// 		f.click = false
// 		f.x = 0
// 	})
// }
const goPage = (url) => {
	uni.navigateTo({ url: url })
}
const isEdit = ref(false)
const checkdAll = ref(false)

const changCheckdAll = () => {
	checkdAll.value = !checkdAll.value
	dataList.value.map(item => {
		item.click = checkdAll.value
	})
	changeCheckIds()
}
const changCheckd = (data) => {
	dataList.value.forEach(item => {
		if (item.id == data.id) item.click = !item.click
	})
	checkdAll.value = dataList.value.every(e => e.click)
	changeCheckIds()
}
// 取消
const resetCheck = () => {
	dataList.value.map(item => {
		item.click = false
	})
	checkIds.value = []
}
// 取消收藏
const checkIds = ref([])
const changeCheckIds = () => {
	checkIds.value = []
	dataList.value.map(item => {
		if (item.click) {
			checkIds.value.push(item.id)
		}

	})
}
const offsetX = ref(0) // 滑动偏移量
const startX = ref(0)  // 触摸起始位置
const isMoving = ref(false)
const deleteWidth = ref(-80 - 20) // 删除按钮宽度(负数)按钮加边距
const selectItemId = ref(null)
// 触摸开始
const handleTouchStart = (e, item) => {
	startX.value = e.touches[0].clientX
	isMoving.value = true
	console.log('item', item)
	selectItemId.value = item.id
}
const getItem = () => {
	let _item = dataList.value.find(f => f.id == selectItemId.value)
	return _item
}
// 触摸移动
const handleTouchMove = (e) => {
	if (!isMoving.value) return
	let _find = getItem()

	// 滑动时 将其他的模块重置回0

	const currentX = e.touches[0].clientX
	const diffX = currentX - startX.value

	// 限制最大滑动距离
	if (diffX < deleteWidth.value) {
		offsetX.value = deleteWidth.value
		_find.offsetX = deleteWidth.value
	} else if (diffX > 0) {
		offsetX.value = 0
		_find.offsetX = 0

	} else {
		offsetX.value = diffX
		_find.offsetX = diffX

	}

}

// 触摸结束
const handleTouchEnd = () => {
	isMoving.value = false
	let _find = getItem()

	// 判断是否达到删除阈值
	if (offsetX.value < deleteWidth.value * 0.6) {
		offsetX.value = deleteWidth.value
		_find.offsetX = deleteWidth.value

	} else {
		offsetX.value = 0
		_find.offsetX = 0

	}

}

// 列表
let dataList = ref([])
let dataListObj = ref({})
const total = ref(0)
const getProductListFun = async () => {
	uni.showLoading()
	let obj = {
		cate_name: selectName.value,
		...pageInfo,
		isSaleRecommend: 1
	}
	await utils.request(api.getProductList
		, obj, 'post').then((res) => {
			uni.hideLoading()
			if (res.code === 200) {
				dataListObj.value = res.data
				dataListObj.value.listIsShow = dataListObj.value.items.length > 0
				dataListObj.value.noDataType = 0
				const itemData = res.data.items.map(item => {
					item.x = 0
					item.click = false
					return item
				})
				dataList.value = dataList.value.concat(itemData)
				total.value = res.data.pageInfo?.total
				// 将数据放到app.globalData 中
				app.globalData.projectItem = dataListObj.value.items
				app.globalData.projectIds = app.globalData.projectItem.reduce((a, b) => {
					a.push(b.id)
					return a
				}, [])


			}
		})
}
onLoad(() => {
	getProductListFun()
})
onUnmounted(() => {
	app.globalData.projectItem = null
	app.globalData.projectIds = null
	app.globalData.multiple = null
})
</script>

<style lang="scss">
.tabBar {
	padding: 0 30rpx;
	height: 74rpx;

	.item {
		width: 136rpx;
		height: 58rpx;
		background: #f8f8f8;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	.active {
		background: #333333;
		color: #fff;
	}
}

.checkBox {
	flex-shrink: 0;

	.noCheckd {
		width: 20rpx;
		height: 20rpx;
		border: 2rpx solid #000
	}

	.icons {
		width: 24rpx;
		height: 24rpx;
	}
}

.bot_flex {
	height: 120rpx;
	width: 100%;
	background-color: #F8F8F8;
	position: fixed;
	bottom: 0;
	padding: 0 30rpx;
	box-sizing: border-box;
	z-index: 99;

	.btn {
		width: 60%;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: #333;
		color: #dbf046;
	}

	.btn_toPage {
		width: 100%;

	}

}

.edit_box {
	// 
	padding: 0 30rpx;

	.edit {
		width: 114rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		background: linear-gradient(to bottom, #FBFFDF, #FFFFFF);

		.icons {
			width: 22rpx;
			height: 22rpx;
		}


	}

	.editactive {
		background: linear-gradient(to bottom, #333, #333);
		color: #dbf046;
	}

	.item {
		width: 158rpx;
		height: 72rpx;
		background: #dbf046;
		border-radius: 20rpx;
		color: #333;
		text-align: center;
		line-height: 72rpx;


	}
}

.nextCard {
	// width: 700rpx !important;
	width: 100%;
	// background-color: red;
	// position: relative;
	// background-color: red;
	// overflow: hidden;
	box-sizing: border-box;
	// height: calc(100vh - 520rpx);

	.bg {
		width: 100%;
		height: 100%;
		background: #000;
		// opacity: 0.1;
		position: absolute;
		top: 120rpx;
		z-index: 2;
		border-radius: 40rpx;

	}

	.menu_box {
		height: 170rpx;

		.menu_box_list {

			.active {
				color: #333333;
				font-weight: 900;
			}

			// position: relative;
			.tipItemActive {
				color: rgb(250, 92, 35);
			}

			.tipBox_list_model {
				background-color: gold;
				// position: absolute;
				left: 0;
				width: 100%;
				z-index: 3;
				border-radius: 40rpx;



				.tipBox_list {
					width: 100%;
					height: 200rpx;
					// position: absolute;
					background-color: #fff;
					top: 0rpx;
					z-index: 3;
					border-radius: 40rpx;
					padding: 20rpx 30rpx 0 30rpx;
					// margin-top: 10rpx;

					.tipItem {
						width: 100%;
						border-top: 2rpx solid #f1f1f1;
						padding: 10rpx 0;
						margin-left: 30rpx;
						color: #666;
					}



					.tipItem:first-child {
						border: none;

					}
				}
			}
		}
	}

	.jiantou {
		width: 30rpx;
		height: 18rpx;
	}

	.imgdeg {
		transform: rotate(180deg);
	}

	.tabTwo {
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(180deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;


		// .tipBox_list {
		//   width: 100%;
		//   height: 200rpx;
		//   background-color: red;
		//   // position: absolute;
		// }

		.left {
			.item {
				// margin-right: 24rpx;
				// border-right: #ccc 4rpx solid;
				// padding-right: 8rpx;
				// position: relative;
				display: flex;
				align-items: center;

			}

			.item:last-child {
				border: none;
			}

			// .tipBox {
			//   width: 100vm;
			//   height: 218rpx;
			//   z-index: 99;
			//   //border: 2rpx solid red;
			//   position: absolute;
			//   left: -20rpx;

			//   .tipList {
			//     position: absolute;
			//     top: 32rpx;
			//     left: 0;
			//     text-align: center;
			//     line-height: 60rpx;
			//   }
			// }
		}
	}

	.qiehuan {
		// border: 2rpx solid red;
		width: 198rpx;
		height: 54rpx;
		background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.cardList {

		// width: 50%;
		.card {

			// width: 690rpx;
			width: 100%;
			height: 408rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #f1f1f1;

			.left {
				width: 222rpx;
				height: 274rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				flex-shrink: 0;
			}

			.right {
				flex: 1;
				height: 274rpx;

				.active {
					color: #333333;
					font-weight: 900;
				}


				.top1 {

					.tip {
						// width: 88rpx;
						display: inline-block;
						line-height: 36rpx;
						box-sizing: border-box;
						height: 36rpx;
						background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						flex-shrink: 0;
						padding: 0rpx 4rpx;

					}

				}

				.domn {
					.price {
						// width: 148rpx;
						height: 92rpx;
						background: linear-gradient(90deg,
								#fff5f3 0%,
								rgba(255, 245, 243, 0) 100%);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					.price2 {
						// width: 148rpx;
						height: 92rpx;
						background: #fff;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						// margin-left: 30rpx;
					}
				}

				.midel {}
			}

			.foot {
				width: 610rpx;
				height: 74rpx;
				background: linear-gradient(92deg,
						#f8f8f8 0%,
						rgba(248, 248, 248, 0) 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
			}
		}
	}

	.scroll-view_H {

		margin-top: 24rpx;
		white-space: nowrap;
		padding: 0 30rpx;
		box-sizing: border-box;

	}

	.scroll-view-item_A {
		//border: 2rpx solid green;
		display: inline-block;
		height: 58rpx;
		background: #ffffff;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		border: 2rpx solid #f1f1f1;
		margin-right: 20rpx;
		line-height: 58rpx;
		text-align: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		// margin-left: 24rpx;

	}

	.scroll-view-item_A_active {
		margin-left: 24rpx;
		background: #000;
		color: #f1f1f1;
	}

	.cardList_box {
		position: relative;
		width: 100%;
		margin: 20rpx 0;
		overflow: hidden;
		box-sizing: border-box;

		&_item {
			width: 100%;
			position: relative;
			transition: transform 0.3s ease;
			z-index: 2;
			// background-color: #fff;
			flex-shrink: 0;
			padding: 0 30rpx;
			box-sizing: border-box;


		}

		.delete-btn {
			width: 160rpx;
			height: auto;
			background-color: #FFF3EC;
			color: #9C0000;
			flex-shrink: 0;
			text-align: center;
			transition: transform 0.3s ease;
			align-self: stretch;
			margin-right: 20rpx;


			text {
				font-size: 28rpx;
			}
		}
	}
}
</style>
